<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API调试页面</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .log { background: #f5f5f5; padding: 10px; margin: 10px 0; border-left: 3px solid #007cba; }
        .error { border-left-color: #dc3545; background: #f8d7da; }
        .success { border-left-color: #28a745; background: #d4edda; }
        button { padding: 10px 20px; margin: 5px; background: #007cba; color: white; border: none; border-radius: 4px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>API对象调试</h1>
    <div id="output"></div>
    
    <button onclick="checkAPI()">检查API对象</button>
    <button onclick="testAPICall()">测试API调用</button>
    <button onclick="clearOutput()">清空输出</button>

    <script>
        const output = document.getElementById('output');
        
        function log(message, type = 'log') {
            console.log(message);
            const div = document.createElement('div');
            div.className = `log ${type}`;
            div.innerHTML = `<strong>${new Date().toLocaleTimeString()}:</strong> ${message}`;
            output.appendChild(div);
            output.scrollTop = output.scrollHeight;
        }
        
        function clearOutput() {
            output.innerHTML = '';
        }
        
        function checkAPI() {
            log('开始检查API对象...');
            
            log(`window.API 是否存在: ${typeof window.API !== 'undefined'}`, window.API ? 'success' : 'error');
            log(`window.Utils 是否存在: ${typeof window.Utils !== 'undefined'}`, window.Utils ? 'success' : 'error');
            
            if (window.API) {
                log(`API.User 是否存在: ${typeof window.API.User !== 'undefined'}`, window.API.User ? 'success' : 'error');
                log(`API.Course 是否存在: ${typeof window.API.Course !== 'undefined'}`, window.API.Course ? 'success' : 'error');
                log(`API.Stats 是否存在: ${typeof window.API.Stats !== 'undefined'}`, window.API.Stats ? 'success' : 'error');
                
                log('完整的API对象结构:');
                log(`<pre>${JSON.stringify(Object.keys(window.API), null, 2)}</pre>`);
            } else {
                log('API对象不存在，无法检查子对象', 'error');
            }
        }
        
        async function testAPICall() {
            log('测试API调用...');
            
            if (!window.API || !window.API.Stats) {
                log('API对象不存在，无法测试', 'error');
                return;
            }
            
            try {
                log('调用 API.Stats.getOverviewStats()...');
                const stats = await window.API.Stats.getOverviewStats();
                log('API调用成功！', 'success');
                log(`返回数据: <pre>${JSON.stringify(stats, null, 2)}</pre>`, 'success');
            } catch (error) {
                log(`API调用失败: ${error.message}`, 'error');
                log(`错误详情: ${error.stack}`, 'error');
            }
        }
        
        // 页面加载完成时自动检查
        document.addEventListener('DOMContentLoaded', () => {
            log('页面加载完成', 'success');
            setTimeout(() => {
                checkAPI();
            }, 1000); // 等待1秒让脚本完全加载
        });
    </script>
    
    <!-- 加载API脚本 -->
    <script src="js/api.js"></script>
</body>
</html> 